<!--
 * @Description: 项目看板-成本计划
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-01 11:08:02
 * @LastEditTime: 2024-03-01 15:42:04
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\headquartersDashboard\index.vue
-->
<template>
  <base-breadcrumb>
    <a-spin :spinning="spinning">
      <fullScreen />
    <!-- 当期数据统计表 -->
    <a-card :bordered="false">
      <!-- 统计 -->
      <board isPresent="1" :totalArr="totalArr"></board>

      <div class="btn_box page-btn-right-top" v-show="code !== 'PD'">
        <a-button @click="superior">上一级</a-button>
      </div>
      <!-- 表格 -->
      <!-- <Table :columns="columns" :tableData="tableData"></Table> -->
      <a-row>
        <div class="unit">(单位：元)</div>
      </a-row>
      <a-row class="totalBox totalBox1">
      <list-table :columns="columns" :ArrTableData="tableData" :isShowColumnFilter="false" :showPage="false"></list-table>
      </a-row>
      <!-- 柱状图 -->
      <EBar ref="accomplishRatio" :eBarData="accomplishRatioOption" :ready="ready" id="eBar1" :isDataZoom="true" :zoom="true" />
      <div class="add"> 目标与实际成本差值</div>
      <div class="smb">实目比</div>
      <!-- 差值和实目比 -->
      <!-- <a-row type="flex" justify="space-between" class="totalBox">
        <a-col class="leftTitle"> 目标与实际成本差值 </a-col>
        <a-col class="difference">
          <a-col v-for="(item, index) in differenceValueData" :key="index">{{ item }}</a-col>
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-between" class="totalBox">
        <a-col class="leftTitle"> 实目比 </a-col>
        <a-col class="difference">
          <a-col v-for="(item, index) in differenceValueData" :key="index">{{ item }}</a-col>
        </a-col>
      </a-row> -->
    </a-card>

    <!-- 已完成节点数据统计表 -->
    <a-card :bordered="false">
      <!-- 统计 -->
      <board :totalArr="project"></board>

      <!-- 表格 -->
      <!-- <Table :columns="columns" :tableData="projectData"></Table> -->
      <a-row>
        <div class="unit">(单位：元)</div>
      </a-row>
      <a-row class="totalBox totalBox1">
      <list-table :columns="columns" :ArrTableData="projectData" :isShowColumnFilter="false" :showPage="false">
      </list-table>
      </a-row>
      <!-- 柱状图 -->
      <EBar ref="accomplishRatio" :eBarData="accomplishRatioOption1" :ready="ready" id="eBar2" :isDataZoom="true" :zoom="true" />
      <div class="add"> 目标与实际成本差值</div>
      <div class="smb">实目比</div>
      <!-- 差值和实目比 -->
      <!-- <a-row type="flex" justify="space-between" class="totalBox">
        <a-col class="leftTitle"> 目标与实际成本差值 </a-col>
        <a-col class="difference">
          <a-col v-for="(item, index) in differenceValueData" :key="index">{{ item }}</a-col>
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-between" class="totalBox">
        <a-col class="leftTitle"> 实目比 </a-col>
        <a-col class="difference">
          <a-col v-for="(item, index) in differenceValueData" :key="index">{{ item }}</a-col>
        </a-col>
      </a-row> -->
    </a-card>

    <a-card :bordered="false">
        <title-name title="总成本折线对比图" />
      <!-- 表格 -->
      <!-- <Table :columns="columns1" :tableData="dataSource"></Table> -->
      <a-row>
        <div class="unit">(单位：元)</div>
      </a-row>
      <a-row class="totalBox">
      <list-table :columns="columns1" :scroll="{x: true}" :ArrTableData="dataSource" :isShowColumnFilter="false" :showPage="false"></list-table>
      </a-row>
      <ELine :eLineData="ELineData" :lineShow="lineShow" @getCostContrastList="getCostContrastList" :isPresent="false"></ELine>
    </a-card>
  </a-spin>
  </base-breadcrumb>
</template>
<script>
import board from '../../headquartersDashboard/components/board/index.vue'
import EBar from '../../headquartersDashboard/components/EBar/EBar.vue' // 柱状图
import Table from '../../headquartersDashboard/components/Table/Table.vue'
import ELine from '../../headquartersDashboard/components/ELine/ELine.vue'
import { placeholder } from '../../headquartersDashboard/components/placeholderWay.js'
import fullScreen from '../../headquartersDashboard/components/fullScreen/fullScreen.vue'
import { getXmCurrentPeriodStatistics,getXmCompleteNodeStatistics,getXmCostContrast } from '@/api/businessAffairs/businessCostPlanManagement.js'

export default {
  name: 'spectaculars',

  components: {
    board,
    EBar,
    // Table,
    ELine,
    fullScreen
  },
  data() {
    return {
      code:this.$userInfo()?.currentPost?.code,
      spinning:false,
      // isScrollY:350,
      // isScrollY1:350,
      // 当期数据统计表 - 表头
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'right',
          customRender: (text, record, index) => {
            if (record.flag == 2) {
              if(record.solidEyeRatio*1!==0){
                return <a-tooltip placement="top">
                    <template slot="title">
                      <span>{record.flagTips}</span>
                    </template>
                    <div class="iconClass"><a-icon type="exclamation-circle" theme="filled" style="color : #f4ea2a;fontSize:16px" class="icon"/>  {index + 1} </div>
                  </a-tooltip>
                 
               }else{
                return <div>{index + 1}</div>
               }
            } else if (record.flag == 1) {
              return <a-tooltip placement="top">
                    <template slot="title">
                      <span>{record.flagTips}</span>
                    </template>
                    <div class="iconClass"><a-icon type="exclamation-circle" theme="filled" style="color : #de5956;fontSize:16px" class="icon"/>  {index + 1} </div>
                  </a-tooltip>
            } else {
              return index + 1
            }

          }
        },
        {
          title: '二级节点名称',
          dataIndex: 'name'
        },
        {
          title: '标准成本',
          dataIndex: 'standardCost',
          align: 'center',
          // customRender: (text, record, index) => {
          //   if (record.flag === 2) {
          //     return <div style="color : #f4ea2a"> {text}</div>
          //   } else if (record.flag === 1) {
          //     return <div style="color : #de5956"> {text}</div>
          //   } else {
          //     return text
          //   }

          // }
        },
        {
          title: ' 目标成本',
          dataIndex: 'targetCost',
          align: 'center',
          width: 150,
        },
        {
          title: ' 当期累计目标成本',
          dataIndex: 'currentTargetCost',
          align: 'center',
        },
        // {
        //   title: ' 当期累计目标成本',
        //   dataIndex: 'targetCost',
        //   align: 'center',
        //   customRender: (text, record, index) => {
        //     if (record.flag === 2) {
        //       return <div style="color : #f4ea2a"> {text}</div>
        //     } else if (record.flag === 1) {
        //       return <div style="color : #de5956"> {text}</div>
        //     } else {
        //       return text
        //     }

        //   }
        // },
        {
          title: ' 当期累计实际成本',
          dataIndex: 'realityCost',
          align: 'center',
          // customRender: (text, record, index) => {
          //   if (record.flag === 2) {
          //     return <div style="color : #f4ea2a"> {text}</div>
          //   } else if (record.flag === 1) {
          //     return <div style="color : #de5956"> {text}</div>
          //   } else {
          //     return text
          //   }

          // }
        },
        {
          title: ' 目标与实际成本差值',
          dataIndex: 'difference',
          align: 'center',
          // customRender: (text, record, index) => {
          //   if (record.flag === 2) {
          //     return <div style="color : #f4ea2a"> {text}</div>
          //   } else if (record.flag === 1) {
          //     return <div style="color : #de5956"> {text}</div>
          //   } else {
          //     return text
          //   }

          // }
        },
        {
          title: ' 实目比',
          dataIndex: 'solidEyeRatio',
          align: 'center',
          width: 150,
          customRender: (text, record, index) => {
            if (record.flag == 2) {
               if(text*1!==0){
                return <a-tooltip placement="top">
                    <template slot="title">
                      <span>{record.flagTips}</span>
                    </template>
                    <div style="backgroundColor : #f4ea2a"> {text}</div>
                  </a-tooltip>
                
               }else{
                return <div> {(text*1).toFixed(4)}</div>
               }
            } else if (record.flag == 1) {
              return <a-tooltip placement="top">
                    <template slot="title">
                      <span>{record.flagTips}</span>
                    </template>
                    <div style="backgroundColor : #de5956"> {text}</div>
                  </a-tooltip>
              
            } else {
              return text
            }

          }
        }
      ],

      // 当期数据统计表 - 表格数据
      tableData: [],

      // 当期数据统计表 - 统计
      totalArr: [
        {
          name: '目标成本合计',
          money: ''
        },
        {
          name: '实际成本合计',
          money: ''
        },
        {
          name: '目标与实际成本差值',
          money: ''
        },
        {
          name: '实目比',
          money: ''
        }
      ],
      // 已完成节点 - 统计
      project:[
      {
          name: '目标成本合计',
          money: '',
        },
        {
          name: '实际成本合计',
          money: '',
        },
        {
          name: '目标与实际成本差值',
          money: '',
        },
        {
          name: '实目比',
          money: '',
        },
      ],
        // 已完成节点 - 表格数据
      projectData:[],
      // 当期数据统计表 - 柱状图
      accomplishRatioOption: {
        legend: {
          // left: '8%',
          // top:'6%',
          data: ['标准成本', '当前累计目标成本', '当前累计实际成本']
        },
        color: ['#4874cb', '#ee823a', '#f2bb43'],
         // y轴滚动条配置
        //  dataZoom:{
        //   show:true,
        //   realtime:true,
        //   type:'slider',
        //   // y:70,
        //   width:"80%",
        //   height:10,
        //   start:0,
        //   end:80,
        //   left: 100,
        //   right: 8,
        //   bottom: 30,
        //   zoomLock: true,
        //   // containLabel: true
        // },
        name: '（元）', //单位
        xAxis: {
          type: 'category',
          data:[],
          axisLabel: {
            show:true,
            interval:0,
            margin:6,
            // textStyle: {
            //   color: function (value) {
            //     if (value === '广东事业部') {
            //       return '#f4ea2a'
            //     } else if (value === '基础分公司') {
            //       return '#de5956'
            //     } else if (value === '水利水电分公司') {
            //       return '#de5956'
            //     } else {
            //       return '#666666'
            //     }
            //   }
            // }
          }
        },
        // nameList:
        data: [
          {
            name: '标准成本',
            data: [],
            type: 'bar',
            barWidth: '10%'
          },
          {
            name: '当前累计目标成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '10%'
          },
          {
            name: '当前累计实际成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '10%'
          }
        ]
      },
      accomplishRatioOption1: {
        legend: {
          // left: '8%',
          // top:'6%',
          data: ['标准成本', '当前累计目标成本', '当前累计实际成本']
        },
        color: ['#4874cb', '#ee823a', '#f2bb43'],
         // y轴滚动条配置
        //  dataZoom:{
        //   show:true,
        //   realtime:true,
        //   type:'slider',
        //   // y:70,
        //   width:"80%",
        //   height:10,
        //   start:0,
        //   end:80,
        //   left: 100,
        //   right: 8,
        //   bottom: 30,
        //   zoomLock: true,
        //   // containLabel: true
        // },
        name: '（元）', //单位
        xAxis: {
          type: 'category',
          data:[],
          axisLabel: {
            show:true,
            interval:0,
            margin:6,
            // textStyle: {
            //   color: function (value) {
            //     if (value === '广东事业部') {
            //       return '#f4ea2a'
            //     } else if (value === '基础分公司') {
            //       return '#de5956'
            //     } else if (value === '水利水电分公司') {
            //       return '#de5956'
            //     } else {
            //       return '#666666'
            //     }
            //   }
            // }
          }
        },
        // nameList:
        data: [
          {
            name: '标准成本',
            data: [],
            type: 'bar',
            barWidth: '10%'
          },
          {
            name: '当前累计目标成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '10%'
          },
          {
            name: '当前累计实际成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '10%'
          }
        ]
      },
      ready:false,
      // 当期数据统计表 - 差值
      differenceValueData: [],
      solidEyeRatio:[],
      differenceValueData1:[],
      solidEyeRatio1:[],
      // 总成本折现对比图 - 表头
      columns1: [
        {
          title: '成本名称',
          dataIndex: 'name',
          width: 180
        },
      ],
      // 总成本折现对比图 - 表数据
      dataSource:[],

      // 总成本折现对比图 - 折线图数据
      ELineData: {
        name: '（元）',
        color: ['#4874cb', '#ee823a', '#f2bb43'],
        xAxis: {
          data: []
        },
        legend: {
          left: '8%',
          top:'6%',
          data: ['标准成本', '当期累计目标成本', '当期累计实际成本']
        },
        series: [
          {
            name: '标准成本',
            type: 'line',
            smooth: true,
            // stack: 'Total',
            label: {
              show: true,
              position: 'top',
              color: '#4874cb'
            },
            smartLabel: {
                enable: true,
                // 可选配置项
            },
            data: []
          },
          {
            name: '当期累计目标成本',
            type: 'line',
            smooth: true,
            // stack: 'Total',
            label: {
              show: true,
              position: 'top',
              color: '#ee823a'
            },
            smartLabel: {
                enable: true,
                // 可选配置项
            },
            data: []
          },
          {
            name: '当期累计实际成本',
            type: 'line',
            smooth: true,
            // stack: 'Total',
            label: {
              show: true,        
              position: 'top',
              color: '#f2bb43',
            },
            smartLabel: {
                enable: true,
                // 可选配置项
            },
            data: []
          }
        ]
      },
      lineShow:false,
      id:this.$userInfo()?.currentPost?.projectId,
      timer1: null,
      timer2: null,
      timer3: null
    }
  },
  watch: {
    //监听路由变更
    $route(newVal) {
      //   console.log(newVal,'newVal');
      if (newVal.path == "/businessAffairs/businessCostPlanManagement/projectDashboard/spectaculars") {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
          }
        this.spinning = true
        this.getData()
        this.getProject()
        this.getCostContrastList()
      }
    }
  },
  created(){
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    this.spinning = true
    this.getData()
    this.getProject()
    this.getCostContrastList()
  },
  mounted() {
    // this.$refs.accomplishRatio.resize()
  },
  methods: {
     getData () {
      this.ready = false
      clearTimeout(this.timer1)
      this.timer1 = setTimeout(async() => {
        try {
        let { data } = await getXmCurrentPeriodStatistics({ id: this.id })
      // 头部数据
      this.totalArr = placeholder(this.totalArr.map((item, index) => {
        if(item.name && item.name === '目标成本合计'){
          item.money = data.targetCostTotal
        } else if(item.name &&item.name === '实际成本合计'){
          item.money = data.realityCostTotal
        } else if(item.name &&item.name === '实目比'){
          item.money = data.solidEyeRatio
        } else if(item.name &&item.name === '目标与实际成本差值'){
          item.money = data.difference
        }
        return item
      }))
      // 表格数据
      this.tableData = placeholder(data.list)
      // this.isScrollY = data.list.length>10?350:false
      let nameArr = [] // 柱状图名称
      let standardCostArr = [] //总标准成本集合
      let targetCostArr = [] //当期累计目标成本集合
      let realityCostArr = [] // 当期累计实际成本集合
      let differenceArr = [] 
      let solidEyeRatioArr =[]
      data.list.forEach((item, index) => {
       item.name !== '合计' && nameArr.push(item.name)
       item.name !== '合计' && standardCostArr.push(item.standardCost)
       item.name !== '合计' && targetCostArr.push(item.currentTargetCost)
       item.name !== '合计' && realityCostArr.push(item.realityCost)
       item.name !== '合计' && this.differenceValueData.push(item.difference)
       item.name !== '合计' && this.solidEyeRatio.push(item.solidEyeRatio)
       item.name !== '合计' && differenceArr.push({
        name:item.name,
        difference:item.difference
       })
       item.name !== '合计' && solidEyeRatioArr.push({
        name:item.name,
        solidEyeRatio:item.solidEyeRatio
       })
      })
      this.accomplishRatioOption.xAxis.data = nameArr
      this.accomplishRatioOption.xAxis.axisLabel.formatter= function(params,index){
        let findDifferenceObj = differenceArr.find((item)=>item.name == params)
        let findSolidEyeRatioObj = solidEyeRatioArr.find((item)=>item.name == params)
        return params+ '\n' + findDifferenceObj?.difference +'\n' +findSolidEyeRatioObj?.solidEyeRatio
      }
      this.accomplishRatioOption.xAxis.axisLabel.textStyle = {
          color: (params) => {
            let color = '#333'
            data.list.forEach((item, index) => {
              if (item.name === params) {
                if (item.flag === 1) {
                  color = "#de5956"
                } else if (item.flag === 2) {
                  if(item.solidEyeRatio*1!==0){
                    color = "#f4ea2a"
                  }
                } else {
                  color = "#666666"
                }
              }
            })
            return color
          }
        }
        if(standardCostArr.length == 0 && targetCostArr.length == 0 && realityCostArr.length == 0){
          this.accomplishRatioOption.isBar = 1
        } else {
          this.accomplishRatioOption.isBar = 2
        }
      this.accomplishRatioOption.data[0].data = standardCostArr
      this.accomplishRatioOption.data[1].data = targetCostArr
      this.accomplishRatioOption.data[2].data = realityCostArr
      this.ready = true
      this.spinning = false
      } catch (error) {
        this.spinning = false
      }
      },1000)
      
     
    },
     getProject () {
      this.ready = false
      this.accomplishRatioOption1.data[0].data = []
      this.accomplishRatioOption1.data[1].data = []
      this.accomplishRatioOption1.data[2].data = []
      clearTimeout(this.timer2)
      this.timer2 = setTimeout(async() => {
        let { data } = await getXmCompleteNodeStatistics({ id: this.id })
      // 头部数据
      this.project = placeholder(this.project.map((item, index) => {
        if(item.name && item.name === '目标成本合计'){
          item.money = data.targetCostTotal
        } else if(item.name &&item.name === '实际成本合计'){
          item.money = data.realityCostTotal
        } else if(item.name &&item.name === '实目比'){
          item.money = data.solidEyeRatio
        } else if(item.name &&item.name === '目标与实际成本差值'){
          item.money = data.difference
        }
        return item  
      }))
      // 表格数据
      this.projectData = placeholder(data.list)
      // this.isScrollY1 = data.list.length>10?350:false
      let nameArr = [] // 柱状图名称
      let standardCostArr = [] //总标准成本集合
      let targetCostArr = [] //当期累计目标成本集合
      let realityCostArr = [] // 当期累计实际成本集合
      let differenceArr = [] 
      let solidEyeRatioArr =[]
      data.list.forEach((item, index) => {
       item.name !== '合计' && nameArr.push(item.name)
       item.name !== '合计' && standardCostArr.push(item.standardCost)
       item.name !== '合计' && targetCostArr.push(item.currentTargetCost)
       item.name !== '合计' && realityCostArr.push(item.realityCost)
       item.name !== '合计' && this.differenceValueData1.push(item.difference)
       item.name !== '合计' && this.solidEyeRatio1.push(item.solidEyeRatio)
       item.name !== '合计' && this.solidEyeRatio.push(item.solidEyeRatio)
       item.name !== '合计' && differenceArr.push({
        name:item.name,
        difference:item.difference
       })
       item.name !== '合计' && solidEyeRatioArr.push({
        name:item.name,
        solidEyeRatio:item.solidEyeRatio
       })
      })
      this.accomplishRatioOption1.xAxis.data = nameArr
      this.accomplishRatioOption1.xAxis.axisLabel.formatter= function(params,index){
        let findDifferenceObj = differenceArr.find((item)=>item.name == params)
        let findSolidEyeRatioObj = solidEyeRatioArr.find((item)=>item.name == params)
        return params+ '\n' + findDifferenceObj?.difference +'\n' +findSolidEyeRatioObj?.solidEyeRatio
      }
      this.accomplishRatioOption1.xAxis.axisLabel.textStyle = {
          color: (params) => {
            let color = '#333'
            data.list.forEach((item, index) => {
              if (item.name === params) {
                if (item.flag === 1) {
                  color = "#de5956"
                } else if (item.flag === 2) {
                  if(item.solidEyeRatio*1!==0){
                    color = "#f4ea2a"
                  }
                } else {
                  color = "#666666"
                }
              }
            })
            return color
          }
        }
        if(standardCostArr.length == 0 && targetCostArr.length == 0 && realityCostArr.length == 0){
          this.accomplishRatioOption1.isBar = 1
        } else {
          this.accomplishRatioOption1.isBar = 2
        }
      this.accomplishRatioOption1.data[0].data = standardCostArr
      this.accomplishRatioOption1.data[1].data = targetCostArr
      this.accomplishRatioOption1.data[2].data = realityCostArr
      this.ready = true
      },1000)
      
    },


     getCostContrastList (type=2) {
      this.lineShow = false
      this.dataSource = []
      this.columns1 = [{
          title: '成本名称',
          dataIndex: 'name',
          width: 180,
        }]
        clearTimeout(this.timer3)
      this.timer3 = setTimeout(async() => {
        let { data } = await getXmCostContrast({ id: this.id ,type})
      data.costNameList.forEach((item, index) => {
        this.columns1.push({
            title:item.slice(0,4) + '年'+item.slice(4,6)+'月',
            dataIndex:item,
        })
      })
      this.ELineData.xAxis.data =  data.costNameList.map((item, index) => {
        return item.slice(0,4) + '年'+item.slice(4,6)+'月'
      })
      data.list.forEach(item => {
              if( item.name != '实目比'){
                this.dataSource.push(placeholder(item))
              }
              })
      this.ELineData.series[0].data = data.standardCostList
      this.ELineData.series[1].data = data.targetCostList
      this.ELineData.series[2].data = data.realityCostList
      this.ELineData.series[2].label = {
                         show: true,
                         position: 'bottom',
                          color: '#f2bb43',
                          formatter: function(params) {
                              return params.value +'(' +data.solidEyeRatioList[params.dataIndex] + '%)';  
                          }
      }
      this.lineShow = true
      })
      
    },
    superior() {
      this.$router.push({
        path: '/businessAffairs/businessCostPlanManagement/branchDashboard/spectaculars'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
.leftTitle {
  flex: 1;
}
.difference {
  flex: 7;
  display: flex;
  justify-content: space-between;
}
.superior {
  position: absolute;
  right: 50px;
  top: 10px;
}
.add{
  margin-top: -80px;
  font-size: 12px;
}
.smb{
  margin-top: -4px;
  font-size: 16px;
  margin-bottom: 20px;
}

.totalBox {
  padding: 0 20px;
  margin-top: 10px;
  margin-bottom:40px;
  @{deep} .ant-table {
    td {
      height: 35px !important;
    }
    .ant-table-body {
      max-height: 385px;
      overflow-y: auto;
      margin:0  !important;
    }
  }
}
.totalBox1{
  @{deep} .ant-table {
    .ant-table-body {
      overflow-x: hidden !important;
    }
  }
}
.unit{
  text-align: right;
  margin-top: -20px;
}
.iconClass{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.icon{
  margin-right: 5px;
}
</style>
